<!-- 提示信息 -->
<app-tip [type]="tipType"></app-tip>
<!-- 遮罩 -->
<app-load *ngIf="isLoading"></app-load>

<div class="table-main">
  <div class="header">
    <div class="left flex" [routerLink]="['/main']"  id="btn-back" style="position: absolute;height: 100%;">
      <div class="left-icon">
        <i class="fa fa-angle-left back-icon" aria-hidden="true"></i>
      </div>
      <div class="left-name">
        <span class="back-name">返回</span>
      </div>
    </div>
    <div class="center">取号</div>
  </div>
  <div class="class-tab flex">
    <div class="left active" routerLink="/main/line-up/line-up-submit" routerLinkActive="link-active">取号</div>
    <div class="right" routerLink="/main/line-up/line-up-list" routerLinkActive="link-active">叫号列表</div>
  </div>
  <div class="class-list flex">
    <div class="class-item" *ngFor="let v of list" >
      <div class="class-item-box" (click)="selectItem(v.id)" [ngClass]="{active: v.id === selectId}">{{v.name}}</div>
    </div>

    <div class="no-data" *ngIf="!list.length">
      <i class="fa fa-info-circle"></i> 暂无分类！
    </div>
  </div>



  <div style="padding: 0 1em;margin-top: 1em;" (click)="onSubmit()"><div class="btn-submit">取号</div></div>
</div>

<div class="table-bottom flex">
  <div class="table-bottom-item" [routerLink]="['/main']" routerLinkActive="link-active">
    <div><i class="fa fa-th-large"></i></div>
    <div>桌台</div>
  </div>
  <div class="table-bottom-item active" [routerLink]="['/main/line-up/line-up-submit']" routerLinkActive="link-active">
    <div><i class="fas fa-users"></i></div>
    <div>排队</div>
  </div>
  <div class="table-bottom-item" [routerLink]="['/main/index']" routerLinkActive="link-active">
    <div>
      <!--<i class="fas fa-utensils"></i>-->
      <i class="fas fa-plus-circle" style="font-size: 1.8em;"></i>
    </div>
    <div>去开台</div>
  </div>
  <div class="table-bottom-item" routerLinkActive="link-active" [routerLink]="['/main/statistics']">
    <div><i class="fa fa-chart-pie"></i></div>
    <div>报表</div>
  </div>
  <div class="table-bottom-item" [routerLink]="['/main/operation/operation-list']" routerLinkActive="link-active">
    <div><i class="fa fa-bars"></i></div>
    <div>操作台</div>
  </div>
</div>
